通常有两种设置元素样式的方式：

  1. 在 CSS 中创建一个类，并添加它：<div class="...">
  2. 将属性直接写入 style：<div style="...">

JS 既可以修改 class，也可以修改 style：

class

elem.className

calss 是保留字，一般不用作对象的属性，所以使用 className 代替：

可读可写：

elem.classList

className 操作字符串，classList 提供了更友好的 calss 操作方式

style

elem.style

elem.style 属性是一个对象，它对应于 "style" attribute 中所写的内容

对于多词 multi-word 属性，使用驼峰式 camelCase：

background-color  => elem.style.backgroundColor
z-index           => elem.style.zIndex
border-left-width => elem.style.borderLeftWidth

对于前缀属性也遵循同样的规则，连字符 - 表示大写：

-moz-border-radius    => elem.style.MozBorderRadius
-webkit-border-radius => elem.style.WebkitBorderRadius

复合样式

对于复合样式，属性值会进行“解包”，并从中推断出对应的值：

document.body.style.margin = '20px'

console.log(document.body.style.margin) // 20px
console.log(document.body.style.marginTop) // 20px
console.log(document.body.style.marginLeft) // 20px

重置样式属性

还原到原来的值：

const lastVal = document.body.style.display
document.body.style.display = "none" // 设置新值

setTimeout(() => document.body.style.display = lastVal, 1000) // 还原到原来的值

设置为空值：

document.body.style.display = "" // 设置为空值

document.body.style.removeProperty('display') // 删除键

两者虽然有差别，但达到的效果基本相同，就相当于没有设置 style.xxx 一样

elem.style.cssText

使用 style.xxx 只能对某个样式属性进行赋值。

不能像这样的 div.style="color: red; width: 100px" 设置完整的属性，因为 div.style 是一个对象，并且它是只读的

想要以字符串的形式设置完整的样式，可以使用特殊属性 style.cssText：

<div id="div">Button</div>

<script>
  div.style.cssText=`color: red !important;
    background-color: yellow;
    width: 100px;
    text-align: center;
  `

  console.log(div.style.cssText)
</script>

window.getComputedStyle()

style property 仅对 "style" attribute 值起作用，而没有任何 CSS 级联（cascade），因此无法使用 elem.style 读取来自 CSS 类的任何内容

注意：